<script setup lang="ts">
import {ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import {Collection, UserFilled} from '@element-plus/icons-vue'
import CustomIcon from "@/assets/icon/CustomIcon.vue";
const activeName = ref('first')
const isModalVisible = ref(false);
const multiple = ref(['1','2', '3', '4'])
const Single = ref()
const showModal = () => {
  isModalVisible.value = true;
};

const closeModal = () => {
  isModalVisible.value = true;
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>

  <el-tabs
      style="height: 1000px"
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
  >
    <el-tab-pane class="el-tabs__content" label="任务中心" name="first">
      <template #label>

        <span>任务中心
          <el-icon style="vertical-align: middle" size="30"><Collection/> </el-icon>
        </span>
      </template>
      <div class="demo-collapse">
        <el-collapse accordion>
          <el-collapse-item class="el-collapse__content" name="1">
            <template  #title>
              <lay-quote style="width: 100%;vertical-align: middle;padding-top: 20px;" align="left">待完成</lay-quote>
            </template>
            <div>
              Consistent with real life: in line with the process and logic of real
              life, and comply with languages and habits that the users are used to;
            </div>
            <div>
              Consistent within interface: all elements should be consistent, such
              as: design style, icons and texts, position of elements, etc.
            </div>
          </el-collapse-item>
          <el-collapse-item class="el-collapse__content" title="已完成" name="2">
            <div>
              Operation feedback: enable the users to clearly perceive their
              operations by style updates and interactive effects;
            </div>
            <div>
              Visual feedback: reflect current state by updating or rearranging
              elements of the page.
            </div>
          </el-collapse-item>
          <el-collapse-item class="el-collapse__content" title="试卷分配" name="3">
            <div>
              Simplify the process: keep operating process simple and intuitive;
            </div>
            <div>
              Definite and clear: enunciate your intentions clearly so that the
              users can quickly understand and make decisions;
            </div>
            <div>
              Easy to identify: the interface should be straightforward, which helps
              the users to identify and frees them from memorizing and recalling.
            </div>
          </el-collapse-item>
          <el-collapse-item class="el-collapse__content" title="查看状态" name="4">
            <div>
              Decision making: giving advices about operations is acceptable, but do
              not make decisions for the users;
            </div>
            <div>
              Controlled consequences: users should be granted the freedom to
              operate, including canceling, aborting or terminating current
              operation.
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-tab-pane>
    <el-tab-pane class="el-tabs__content" label="试卷中心" name="second">
      <template #label>
        <span>试卷中心
          <el-icon style="vertical-align: middle" size="30"><CustomIcon/> </el-icon>
        </span>
      </template>
      <div class="demo-collapse">
        <lay-checkcard-group v-model="Single">
          <lay-checkcard
              shadow="hover"
              value="1"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>
          <lay-checkcard
              value="2"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>
          <lay-checkcard
              value="3"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>
          <lay-checkcard
              value="4"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>

          <lay-checkcard
              value="5"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>
          <lay-checkcard
              value="6"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>
          <lay-checkcard
              value="7"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>
          <lay-checkcard
              value="8"
              avatar="http://abc.pearadmin.com/logo-png.png"
              title="标题"
              description="选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。">
          </lay-checkcard>
        </lay-checkcard-group>

      </div>
    </el-tab-pane>
    <el-tab-pane class="el-tabs__content" label="视频课堂"  name="third">
      <template #label>
        视频课堂
        <li style="margin-left: 5px" class="icon icon-mianshou"/>
      </template>
    </el-tab-pane>

    <el-tab-pane class="el-tabs__content" label="在线练习" name="fourth">
      <template #label>
        在线练习
        <li style="margin-left: 5px" class="icon icon-xiantiao_ceyan"/>
      </template>
    </el-tab-pane>
  </el-tabs>

</template>

<style  scoped>

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #FFF000;
  font-size: 32px;
  font-weight: 600;
  height: 1000px;
}
.el-collapse > .el-collapse__content{
  padding-left: 30px;

  color: #1DE9B6;
}
</style>